<template>
    <div class="wrap">
      <div class="tou">
        <img @click="" class="img1" src="../../assets/个人中心/1个人中心/jiantou.png"/>
        <p>添加新地址</p>
        <span>完成</span>
      </div>
      <div class="ply">
        <p>请使用您的真实姓名，否则订单将无法发出</p>
      </div>
      <ul class="name">
        <li>
          <input type="text" placeholder="请填写真实姓名"/>
        </li>
        <li>
          <input type="text" placeholder="请填写手机号" />
        </li>
        <li class="li3">
          <input type="text" placeholder="请选择城市" />
          <img src="../../assets/个人中心/1个人中心/右箭头.png"/>
          <div class="xiala">
          </div>
        </li>
        <li>
          <input type="text" placeholder="请填写详细地址" />
        </li>
        <li>
          <input type="text" placeholder="请填写邮编"/>
        </li>
      </ul>
    </div>
</template>

<script >

</script>

<style scoped="scoped">
  .tou{
    width: 100%;
    height: 2.666rem;
    background: #e53e42;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tou .img1{
    width: 0.638rem;
    height: 1.055rem;
    position: absolute;
    left: 0.555rem;
  }
  .tou p{
    position: absolute;
    bottom: 0.972rem;
    left: 5.8rem;
    height: 0.972rem;
    font-size: 1rem;
    color: #ffffff;
  }
  .tou span{
    position: absolute;
    right: 0.555rem;
    height: 0.805rem;
    font-size: 0.7rem;
    line-height: 1rem;
    color: #ffffff;
  }
  .ply{
    width: 100%;
    height: 2rem;
    display: flex;
    align-items: center;
    position: relative;
  }
  .ply p{
    position: absolute;
    left: 0.555rem;
    height: 0.638rem;
    font-size: 0.666rem;
    line-height: 1rem;
    color: #e53e42;
  }

  ul{
    width: 100%;
    height: 14.444rem;
  }
  ul li{
    width: 100%;
    height: 2.777rem;
    border-top: 1px solid #CCCCCC;
    box-sizing: border-box;
    background: white;
    display: flex;
    align-items: center;
    position: relative;
  }
  .name li input{
    width: 80%;
    height: 100%;
    position: absolute;
    left: 0.555rem;
    font-size: 0.777rem;
    line-height: 1rem;
  }
  ul li p{
    position: absolute;
    left: 0.555rem;
    height: 0.777rem;
    font-size: 0.777rem;
    line-height: 1rem;
    letter-spacing: 0px;
    color: #808080;
  }
  ul li:nth-child(1){
    border-top: 1px solid #CCCCCC;
    margin-bottom: 0.555rem;
  }
  ul li:nth-child(5){
    border-bottom: 1px solid #CCCCCC;
  }
  ul li img{
    position: absolute;
    width: 0.277rem;
    height: 0.5rem;
    right: 0.555rem;
    top: 1.138rem;
  }
  .xiala {
    width: 100%;
    height: 100%;
  }
  .xiala .address{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .xiala .address select{
    width: 30%;
    font-size: 0.388rem;
  }
</style>
